<template>
  <div class="add">
    <van-nav-bar title="发布房源" left-arrow @click-left="onClickLeft" />
    <div>
      <van-cell
        title="房源信息"
        :title-style="{ color: '#21b97a', fontSize: '15px' }"
      />
      <van-cell
        title="小区名称"
        is-link
        :value="this.$route.params.name || '请输入小区名称'"
        to="/rent/search"
      />
      <van-field v-model="moneyValue" label="租金" placeholder="请输入租金/月">
        <template #extra>
          <div>￥/月</div>
        </template>
      </van-field>
      <van-field
        v-model="buildValue"
        label="建筑面积"
        placeholder="请输入建筑面积"
      >
        <template #extra>
          <div>m²</div>
        </template>
      </van-field>
      <van-cell
        title="户型"
        is-link
        :value="val[0] || '请选择'"
        @click="houseType(0)"
      />
      <van-cell
        title="所在楼层"
        is-link
        :value="val[1] || '请选择'"
        @click="floorFn(1)"
      />
      <van-cell
        title="朝向"
        is-link
        :value="val[2] || '请选择'"
        @click="orientationFn(2)"
      />
    </div>
    <div>
      <van-cell title="房屋标题" />
      <van-field
        v-model="titleValue"
        placeholder="请输入标题（例如：整租 小区名 2室 5000元）"
      />
    </div>
    <div class="house-img">
      <van-cell title="房屋图像" />
      <!-- <van-uploader :after-read="afterRead" upload-icon="plus"  /> -->
      <div class="img-list">
        <van-uploader v-model="fileList" multiple upload-icon="plus" />
      </div>
    </div>
    <div class="house-supporting">
      <van-cell title="房屋配置" />
      <ul class="supporting">
        <li
          v-for="(item, index) in supportingList"
          :key="index"
          @click="supportingFn(item[1])"
          :class="{ active: selList.indexOf(item[1]) !== -1 }"
        >
          <i :class="item[0]"></i>
          <p>{{ item[1] }}</p>
        </li>
      </ul>
    </div>
    <div class="house-description">
      <van-cell title="房屋描述" />
      <div class="description">
        <textarea
          rows="5"
          placeholder="请输入房屋描述信息"
          v-model="descriptionValue"
        ></textarea>
      </div>
    </div>

    <div class="add-bottom">
      <div class="cancel" @click="onBack">取消</div>
      <div class="submit" @click="onSubmit">提交</div>
    </div>
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>

<!-- {
  "title": "整租 · 豪华小区 精装修出租 小区环境幽静",
  "description": "【装修描述】 装修简洁，家电配齐，通风采光效果良好，格局方正。",
  "houseImg": "img1|im2|img3",
  "oriented": "ORIEN|caa6f80b-b764-c2df",
  "supporting": "空调|洗衣机",
  "price": "1234",
  "roomType": "ROOM|ce2a5daa-811d-2f49",
  "size": "123",
  "floor": "FLOOR|1",
  "community": "AREA|93cbbe43-741d-de54"
} -->

<script>
import { rentalHouseApi, houseImgApi, houseParamsApi } from '@/api'
import { Dialog } from 'vant'
export default {
  data () {
    return {
      titleValue: '', // 标题
      descriptionValue: '', // 描述
      moneyValue: null, // 租金
      showPicker: false,
      buildValue: '', // 面积
      columns: [],
      val: ['', '', ''], // 户型 楼层 朝向
      index: null,
      fileList: [], // 图像
      supportingList: [
        ['iconfont icon-yigui-hui', '衣柜'],
        ['iconfont icon-xiyiji', '洗衣机'],
        ['iconfont icon-kongdiao', '空调'],
        ['iconfont icon-meiqitianranqi', '天然气'],
        ['iconfont icon-bingxiang', '冰箱'],
        ['iconfont icon-nuanqi', '暖气'],
        ['iconfont icon-dianshi', '电视'],
        ['iconfont icon-haofangtuo400iconfont2reshuiqi', '热水器'],
        ['iconfont icon-wifi', '宽带'],
        ['iconfont icon-haofangtuo400iconfont2shafa', '沙发']
      ],
      selList: [], // 房屋配置
      houseParams: {}
    }
  },
  async created () {
    // 发布房屋所需条件
    const res = await houseParamsApi()
    this.houseParams = res.data.body
  },
  methods: {
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      console.log(file)
    },
    onClickLeft () {
      this.$router.push({
        path: '/home'
      })
    },
    onConfirm (val) {
      this.val[this.index] = val
      this.showPicker = false
      console.log(this.val)
    },
    houseType (num) {
      this.index = num
      this.showPicker = true
      this.columns = ['一室', '二室', '三室', '四室', '四室+']
    },
    floorFn (num) {
      this.index = num
      this.showPicker = true
      this.columns = ['高楼层', '中楼层', '低楼层']
    },
    orientationFn (num) {
      this.index = num
      this.showPicker = true
      this.columns = ['东', '南', '西', '北', '东南', '东北', '西南', '西北']
    },
    // 处理数据
    supportingFn (name) {
      // 判断选择的里面有无
      if (this.selList.indexOf(name) !== -1) {
        this.selList.splice(this.selList.indexOf(name), 1)
      } else {
        this.selList.push(name)
      }
    },
    onBack () {
      this.$router.push({
        path: '/home'
      })
    },
    // 转换请求数据
    dataProcess (key, val) {
      console.log(this.houseParams[key])
      for (let i = 0; i < this.houseParams[key].length; i++) {
        if (this.houseParams[key].label === val) {
          return this.houseParams[key].value
        }
      }
    },
    // 出租请求
    async onSubmit () {
      const form = new FormData()
      for (let i = 0; i < this.fileList.length; i++) {
        form.append('file', this.fileList[i].file)
      }
      const resimg = await houseImgApi(form)
      const houseObj =
        {
          title: this.titleValue,
          description: this.descriptionValue,
          houseImg: resimg.data.body.join('|'),
          oriented: this.dataProcess('oriented', this.val[2]),
          supporting: this.selList.join('|'),
          price: this.moneyValue,
          roomType: this.dataProcess('roomType', this.val[0]),
          size: this.buildValue,
          floor: this.dataProcess('floor', this.val[1])
          // community: this.$route.params.id
        }
      const res = await rentalHouseApi(houseObj)
      if (res.data.status === 200) {
        Dialog.confirm({
          title: '提示',
          message: '房源发布成功',
          confirmButtonText: '继续发布',
          confirmButtonColor: '#66afed',
          cancelButtonText: '去查看'
        })
          .then(() => {
            // on confirm
          })
          .catch(() => {
            this.$router.push({
              path: '/home/list'
            })
          })
      } else if (res.data.status === 400) {
        Dialog.alert({
          title: '提示',
          message: '登录失效，请重新登录'
        }).then(() => {
          this.$router.push({
            path: '/login'
          })
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.add {
  padding-bottom: 70px;
  background-color: #f6f5f6;
}
.van-cell__title {
  color: #666;
  // &:first-child{
  //   color: #21b97a;
  //     font-size: 15px;
  // }
}
// .van-uploader {
//   margin-left: 5px;
//   width: 82px;
//   height: 82px;
// }
/deep/.van-uploader__upload {
  background-color: #fff;
  border: #ddd 1px solid;
  border-radius: 3px;
}
/deep/.van-uploader__preview-image {
  border-radius: 3px;
}
/deep/.van-picker__toolbar button {
  color: #108ee9;
  font-size: 17px;
  padding: 9px 15px;
  height: 42px;
}
.supporting {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  background: #fff;
  li {
    margin: 10px 0;
    width: 20%;
    line-height: 23px;
    font-size: 14px;
    i {
      font-size: 23px;
    }
  }
}
.description {
  height: 128px;
  padding: 10px 15px;
  textarea {
    border: none;
    resize: none;
    width: 100%;
    height: 100%;
    font-size: 14px;
  }
}
.img-list {
  padding: 9px 8px 0;
}
.house-description,
.house-img {
  background-color: #fff;
}
.add-bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  height: 45px;
  line-height: 45px;
  z-index: 1;
  color: #fff;
  font-size: 15px;
  background-color: #fff;
  display: flex;
  .cancel {
    color: #2eb97c;
    flex: 1;
  }
  .submit {
    background-color: #2eb97c;
    flex: 1;
  }
}
.house-supporting {
  margin-bottom: 20px;
}
.active {
  color: #2eb97c;
}
</style>
